<!-- 日志详情 -->
<template>
  <div class="record-detail">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>

    <div class="record-list">
      <!-- 日志详情List -->
      <van-cell-group>
        <van-cell title="部门:" :value="logList.dict_name" />
        <van-cell title="姓名:" :value="logList.Staff_Name" />
        <van-cell title="创建日期:" :value="logList.CreateTime" />
        <van-cell title="工作日志:" :value="logList.Info" />
        <van-cell title="备注:" :value="logList.Remark" />
      </van-cell-group>
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onEdit">修改日志</van-button>
      </div>
    </div>

    <!-- 修改弹出层 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-field v-model="editList.info" label="工作日志:" name="info" type="textarea" :autosize="{ maxHeight: 300,minHeight: 300 }" />
      <van-field v-model="editList.remark" label="备注:" name="remark" type="textarea" />
      <div class="edit-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onSubmit">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { addApiLog } from '@/request/api'
export default {
  name: 'RecordDetail',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      logList: {}, // 日志详情数据
      showEdit: false,
      editList: {
        info: '',
        remark: ''
      }
    }
  },
  created () {
    this.logList = JSON.parse(sessionStorage.getItem('LOG_LIST'))
    console.log(this.logList)
  },
  methods: {
    // 修改日志按钮触发
    onEdit () {
      this.showEdit = true
      this.editList.info = this.logList.Info
      this.editList.remark = this.logList.Remark
    },
    // 修改日志提交
    onSubmit () {
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要修改此条日志吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        this.editList.id = this.logList.ID
        this.editList.name = sessionStorage.getItem('userId')
        this.editList.type = ''
        console.log(this.editList)
        addApiLog(this.editList).then(res => {
          console.log(res)
          if (res.msg === '修改成功') {
            this.$router.push({ path: '/myRecord' })
          } else {
            this.$toast.fail('修改失败')
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
.record-detail {
  width: 100%;
  height: 100%;
  .record-list {
    height: calc(100% - 1.2rem);
    overflow-y: auto;
    overflow-x: hidden;
    .van-cell-group {
      &::after {
        border: none;
      }
      .van-cell {
        .van-cell__value {
          flex: 2;
          text-align: left;
        }
      }
    }
    .task-btn {
      margin: .4rem;
    }
  }
  .van-popup {
    .edit-btn {
      margin: .4rem;
    }
  }
}
</style>
